<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title data-i18n="resources.title_tiledMapLayer_rasterfunction"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script type="text/javascript">
      var map = new mapboxgl.Map({
        container: 'map', // container id
        style: {
          version: 8,
          sources: {
            'raster-tiles': {
              type: 'raster',
              tileSize: 256,
              tiles: ['https://iserver.supermap.io/iserver/services/map-ndvi/rest/maps/hainanImage/zxyTileImage.jpg?z={z}&x={x}&y={y}&width=256&height=256&transparent=true&redirect=false&cacheEnabled=false&rasterfunction=' + encodeURIComponent('{"redIndex":0,"nirIndex":2,"colorMap":"0:ffffe5ff;0.1:f7fcb9ff;0.2:d9f0a3ff;0.3:addd8eff;0.4:78c679ff;0.5:41ab5dff;0.6:238443ff;0.7:006837ff;1:004529ff","type":"NDVI"}')],
            }
          },

          layers: [
            {
              id: 'simple-tiles',
              type: 'raster',
              source: 'raster-tiles',
              minzoom: 0,
              maxzoom: 22
            }
          ]
        },
        center: [109.49999055094979, 19.00300764713883],
        zoom: 11,
        maxZoom: 11
      });
    </script>
  </body>
</html>
